
<?php use_stylesheet('data/main.css');?>

<script type="text/javascript">
$(document).ready(function(){

    // handler on removing row
    $(".remove").button({
        icons: { primary: "ui-icon-trash"}, text: false
    }).click(function(){
        remove($(this));
    });

    // handler on editing row
    $(".edit").button({
        icons: { primary: "ui-icon-pencil"}, text: false
    }).click(function() {
        edit($(this));
    })

    // button for editing species
    $(".species").button({
        icons: { primary: "ui-icon-triangle-1-e"}, text: true
    });
    $(".attribute").button({
        icons: { primary: "ui-icon-triangle-1-e"}, text: true
    });
});


</script>


<table id="observation-table" class="table-list ui-widget ui-widget-content">
    <thead class="ui-widget-header">
        <tr>
            <td></td><td>Name</td><td>Latitude</td><td>Longitude</td><td>Remarks</td>
            <td>Observation Date</td><td></td>
        </tr>
    </thead>
    <tbody>
        <?php if ($observations->count() == 0) : ?>
        <tr>
            <td colspan="5">No observation. Click add button below to add new observation.</td>
        </tr>
        <?php else: ?>
            <?php foreach ($observations as $i => $obs): ?>
            <tr>
                <td nowrap="true" style="font-size: 75%;" align="left">
                    <button class="edit" id="edit<?php echo $obs->getId() ?>" title="Edit">Edit</button>
                    <button class="remove" id="remove<?php echo $obs->getId() ?>" title="Remove">Remove</button>
                </td>
                <td id="<?php echo 'observation_' . $obs->getId() . '_location'?>"><?php echo $obs->getLocation() ?></td>
                <td id="<?php echo 'observation_' . $obs->getId() . '_lat'?>"><?php echo $obs->getLat() ?></td>
                <td id="<?php echo 'observation_' . $obs->getId() . '_lng'?>"><?php echo $obs->getLng() ?></td>
                <td id="<?php echo 'observation_' . $obs->getId() . '_remarks'?>"><?php echo $obs->getRemarks() ?></td>
                <td id="<?php echo 'observation_' . $obs->getId() . '_date'?>"><?php echo $obs->getObservationDate() ?></td>
                <td nowrap="true" style="font-size: 75%;" align="right">
                    <a href="<?php echo url_for('data/showSpecies?obs=' . $obs->getId()) ?>" class="species" title="Edit species">Species</a>
                    <a href="<?php echo url_for('data/showAttribute?obs=' . $obs->getId()) ?>" class="attribute" title="Edit attributes">Attributes</a>
                </td>
            </tr>
            <?php endforeach; ?>
        <?php endif; ?>
    </tbody>
</table>